<html>
<head>
  <script src="vendor/support/jquery.js" type="text/javascript"></script>
  <script src="vendor/support/underscore.js" type="text/javascript"></script>
  <script src="vendor/assets/javascripts/input_calendar.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/input_calendar.css" />
</head>
<style>
body
{
  padding:20px;
  font-family:'Lucida Grande', Helvetica, Arial, sans-serif;
  background:#eee;
}
h1 { font-size:1.2em;}
div { float:left; width:225px;}
</style>
<body>
      
  <div>
  <h1>Default</h1>
  <input type="text" value="2012-05-21" id="event_date" readonly>
  <script>
  Calendar.attach("event_date")
  </script>
  </div>
  
  <div>
  <h1>Custom text</h1>
  <input type="text" value="2012-05-21" id="event2_date" readonly>
  <script>
  Calendar.attach("event2_date", {footer: "<strong>Due by:</strong> <%= month %> <%= day %>, <%= year %>"})
  </script>
  </div>
  
  <div>
    <h1>Calendar with empty date</h1>
    <label>Should default to current</label>
    <input type="text" value="" id="blank_date" readonly>
    <script>
    Calendar.attach("blank_date")
    </script>
  </div>
  
</body>
</html>